import React, {Component, PropTypes} from 'react';

import {format} from '../../../utils/datetime';
import {CHARGE_STATUS_EXAMINE, CHARGE_STATUS_SUCCESS, CHARGE_STATUS_FAILED} from '../constants/ChargeConstant';

class ChargeRecordItem extends Component {
  
  constructor(props) {
    super(props);
    this.state = {
      viewContent: false,
    };
    this.viewContent = this.viewContent.bind(this);
  }

  viewContent() {
    this.setState({
      viewContent: !this.state.viewContent
    });
  }

  formatDate(datestr, formatStr ) {
    return format(new Date(datestr), formatStr);
  }

  render() {
    const {item} = this.props;
    const status = this.props.status;
    return (
      <div className="charge-record-item" onClick={this.viewContent}>
        <div className="title">
          <div className={"status-progress "+status}></div>
          <div className="left">
            <p className="order-shop">&yen;{item.hkMoney}</p>
            <p className="order-number">订单号:<span>{item.hkOrder}</span></p>
          </div>
          <div className="right">
            <p className="time">{item.hkTime.split(' ')[1]}</p>
            <p className="day">{item.hkTime.split(' ')[0]}</p>
          </div>
          <div className="arrow arrow-change"></div>
        </div>
        <div className={"content "+ ( this.state.viewContent ? 'view-me': '')}>
          <div className="inner">
            <ul className="clearfix ">
              <li className="money-date start-date"><p>支付方式</p><p><span>{item.hkCompanyBank}</span></p></li>
              <li className="money-date submit-date"><p>入款时间</p><p><span>{item.hkTime.split(' ')[0]}</span> <span>{  this.formatDate(item.hkTime, 'HH:mm')  }</span></p></li>
            </ul>
            <div className="content-status">
              <p><span>备注：</span>{item.remark}</p>
              <p>{status == CHARGE_STATUS_EXAMINE ? "正在审核中..." : ""}</p>
            </div>
          </div>
        </div>
      </div>
    );
  }
};

ChargeRecordItem.propTypes = {
  item: PropTypes.object.isRequired,
  status: PropTypes.string
};

export default ChargeRecordItem;